<template>
	<view class="container" :style="[containHeight]">
		<view class="search-content">
			<view class="search-item">
				<text class="search-label">日期：</text>
				<view class="dateBorder">
					<uni-datetime-picker v-model="rangeDate" type="datetimerange" :border="false" />
				</view>
			</view>
			<view class="search-item">
				<text class="search-label">考试名称：</text>
				<u-picker :show="showisName" :columns="options.name" v-model="searchParams.name"
					@confirm="isNameConfirm" @cancel="showisName=false"></u-picker>
				<view class="select-border" @click="showisName=true">
					<text v-if="!searchParams.name">请选择考试名称</text>
					<text v-if="searchParams.name" class="selectedTxt">{{searchParams.name}}</text>
				</view>
			</view>
			<view class="search-item">
				<text class="search-label">查询类型：</text>
				<u-radio-group v-model="searchParams.detailDisplay">
					<u-radio shape="square" label="详细学分" :name="0"></u-radio>
					<u-radio shape="square" label="学分汇总" :name="1"></u-radio>
				</u-radio-group>				
			</view>
			<view class="search-item">
				<text class="search-label">部门：</text>
				<u-picker :show="showisDeptName" :columns="options.deptName" v-model="searchParams.deptName"
					@confirm="isDeptNameConfirm" @cancel="showisDeptName=false"></u-picker>
				<view class="select-border" @click="showisDeptName=true">
					<text v-if="!searchParams.deptName">请选择部门</text>
					<text v-if="searchParams.deptName" class="selectedTxt">{{searchParams.deptName}}</text>
				</view>
			</view>
			<view class="search-item">
				<text class="search-label">员工：</text>
				<u-picker :show="showisUsername" :columns="options.username" v-model="searchParams.username"
					@confirm="isUsernameConfirm" @cancel="showisUsername=false"></u-picker>
				<view class="select-border" @click="showisUsername=true">
					<text v-if="!searchParams.username">请选择员工</text>
					<text v-if="searchParams.username" class="selectedTxt">{{searchParams.username}}</text>
				</view>
			</view>

			<view class="btn-group">
				<u-button text="查询" type="primary" :loading="btnSearch" loadingText="查询中" class="search-btn"
					@click="toSearch"></u-button>
				<u-button text="重置" class="reset-btn" @click="toReset"></u-button>
			</view>
		</view>
		<view class="historicalAchievements">
			<view v-if="achievementList.length==0">
				<u-empty mode="list" icon="../../static/listEmpty.png"></u-empty>
			</view>
			<view class="historicalAchievements_item" v-for="(item,index) in achievementList" :key="index"
				:style="{'background-color': getBackgroundColor(index)}" v-else>
				<view class="layout-between">
					<view class="testPaperTitle">{{item.username}}</view>
				</view>
				<view class="testTime">考试时间：{{item.endTime}} </view>
				<view class="line"></view>
				<view class="historical_content">
					<u-row class="historical_item">
						<u-col span="3">
							<view class="historical_title"> 获取途径</view>
							<view class="historical_txt">{{item.name}}</view>
						</u-col>
						<u-col span="3">
							<view class="historical_title">部门</view>
							<view class="historical_txt">{{item.deptName}}</view>

						</u-col>
						<u-col span="3">
							<view class="historical_title">获取学分</view>
							<view class="historical_txt">{{item.obtainLearningScore}}</view>
						</u-col>
						<u-col span="3">
							<view class="historical_title">获取学时</view>
							<view class="historical_txt">{{item.obtainLearningTime}}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<u-loadmore :status="statusLoading" v-if="achievementList.length!=0" />
		</view>

	</view>
</template>

<script>
	import {
		viewExamName,
		selectDeptName,
		viewUsername,
		creditMain,
		creditSelect
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				userInfo: {},
				achievementList: [],
				total: null, //总条数
				page: 1, //当前页码
				pageSize: 10, //每页显示数量
				// backgroundColors: ['#FBF2DD', '#FDE07A', '#BDD3EA'],E3F4FA
				backgroundColors: ['#FBF2DD', '#FCFAA7', '#E3F4FA'],
				rangeDate: [],
				showisName: false,
				showisDeptName: false,
				showisUsername: false,
				options: {
					name: [], // 考试信息（获取途径）					
					deptName: [], //部门
					username: [], //员工
				},
				searchParams: {
					examCategoryId: '',
					name: '',
					deptName: '',
					username: '',
					detailDisplay: 0, //0代表详细学分，1代表学分汇总
				},
				btnSearch: false,
				//仅用于像后端传递数据
				paramsValue: {
					detailDisplay: '',
					startTime: null,
					endTime: '',
					examCategoryId: '',
					name: '',
					deptName: '',
					username: '',
					pageSize: 5,
					page: 1,
				},
				statusLoading: 'loadmore',
				nextQuery: false,
				onlyReachBottom: true,
				fullHeight: true,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userinfo')
			this.getExamAchievements()
			this.getOptions()
		},
		computed: {
			containHeight() {
				return this.fullHeight ? {
					/*#ifdef MP-WEIXIN*/
					// 微信小程序特有代码
					height: '100vh',
					/*#endif*/
					/*#ifndef MP-WEIXIN*/
					height: 'calc(100vh - 44px)'
					/*#endif*/
				} : {
					height: '100%'
				}
			},
		},
		methods: {
			getExamAchievements() {
				creditMain({
					pageSize: this.pageSize,
					page: this.page,
				}).then(s => {
					if (s.code === 20000) {
						this.achievementList = this.achievementList.concat(s.data.data)
						this.total = s.data.total
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
			},
			getBackgroundColor(index) {
				if (index >= this.backgroundColors.length) {
					index %= this.backgroundColors.length
				}
				return this.backgroundColors[index]
			},
			toSearch() {
				this.paramsValue.page = 1
				this.btnSearch = true
				this.onlyReachBottom = false
				//处理参数向后端查询数据							
				this.paramsValue.name = this.searchParams.name
				this.paramsValue.deptName = this.searchParams.deptName
				this.paramsValue.username = this.searchParams.username
				this.paramsValue.detailDisplay=this.searchParams.detailDisplay
				this.paramsValue.startTime = this.rangeDate[0]
				this.paramsValue.endTime = this.rangeDate[1]
				//过滤空的参数
				const params = Object.keys(this.paramsValue).filter((key) => this.paramsValue[key] !== null && this
					.paramsValue[key] !== '' && this.paramsValue[key] !== undefined).reduce((acc, key) => ({
					...acc,
					[key]: this.paramsValue[key]
				}), {})
				// console.log("const params", params);
				this.achievementList = []
				creditSelect(
					params
				).then(s => {
					console.log("查询s", s);
					if (s.code === 20000) {
						//搜索结果反映到视图
						this.btnSearch = false
						this.achievementList = s.data.data
						this.nextQuery = true
						// this.searchList = this.searchList.concat(s.data.data)
						//查询结果的页数,向上取整
						let searchPageNum = Math.ceil(s.data.total / this.pageSize)
						this.page = 1
						if (searchPageNum > this.page) {
							//调查询接口，页码加1							
							this.statusLoading = 'loading'
							// console.log("还有下一页");
						} else {
							this.statusLoading = 'nomore'
							// console.log("只有当前页");
						}
						//查询参数置空
						// this.paramsValue = {}
						// this.paramsValue.page = 1
						// this.params = {}
						// this.paramsValue.detectRes = ''
						// this.searchParams={}
						// this.rangeDate=['','']
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			isNameConfirm(val) {
				this.showisName = false
				this.searchParams.name = val.value[0]
			},
			isDeptNameConfirm(val) {
				this.showisDeptName = false
				this.searchParams.deptName = val.value[0]
			},
			isUsernameConfirm(val) {
				this.showisUsername = false
				this.searchParams.username = val.value[0]
			},
			// 获取下拉列表
			getOptions() {
				viewExamName().then(s => {
					if (s.code === 20000) {
						this.options.name = [s.data]
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
				selectDeptName().then(s => {
					if (s.code === 20000) {
						this.options.deptName = [s.data]
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
				viewUsername().then(s => {
					if (s.code === 20000) {
						this.options.username = [s.data]
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
			},
			//重置
			toReset() {
				this.searchParams = {}
				this.rangeDate = []
				this.page = 1
				this.getExamAchievements()
				this.nextQuery = false
				this.onlyReachBottom = true
				this.searchParams.detailDisplay=0
			},
		},
		onReachBottom() {
			if (this.fullHeight) {
				this.fullHeight = false
			}
			if (this.nextQuery) {
				//搜索结果
				++this.paramsValue.page
				// this.toSearch()
				this.btnSearch = false
				//处理参数向后端查询数据
				this.paramsValue.name = this.searchParams.name
				this.paramsValue.deptName = this.searchParams.deptName
				this.paramsValue.username = this.searchParams.username
				this.paramsValue.detailDisplay=this.searchParams.detailDisplay
				this.paramsValue.startTime = this.rangeDate[0]
				this.paramsValue.endTime = this.rangeDate[1]
				//过滤空的参数
				const params = Object.keys(this.paramsValue).filter((key) => this.paramsValue[key] !== null && this
					.paramsValue[key] !== '' && this.paramsValue[key] !== undefined).reduce((acc, key) => ({
					...acc,
					[key]: this.paramsValue[key]
				}), {})
				// console.log("const params", params);
				creditSelect(
					params
				).then(s => {
					console.log("查询s", s);
					if (s.code === 20000) {
						this.achievementList = this.achievementList.concat(s.data.data)
						// console.log("this.achievementList onreachbooon 查询", this.achievementList);
						this.onlyReachBottom = false
						//所有数据加载完
						if (s.data.total == this.achievementList.length) {
							this.statusLoading = 'nomore'
							this.nextQuery = false
							// console.log("s.data.total==this.achievementList.length");
						}
						//查询参数置空
						// this.paramsValue = {}
						// this.paramsValue.page = 1
						// this.params = {}
						// this.paramsValue.detectRes = ''
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			} else if (this.onlyReachBottom) {
				// console.log("this.page * this.pageSize < this.total", this.page * this.pageSize < this.total);
				// console.log("1", this.page, this.pageSize, this.total);
				if (this.page * this.pageSize < this.total) {
					this.statusLoading = 'loading'
					this.page++
					this.getExamAchievements()
					// console.log("onReachBottom");
				} else {
					this.statusLoading = 'nomore'
				}
			} else {
				// console.log("什么也不做");
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		// box-sizing: border-box;
		// padding: 10rpx 30rpx;
		background: linear-gradient(#5191FF 5%, #6AA2FF 8%, #BDD7FE 15%, #F6FAFF 100%);
		padding: 30rpx 30rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.basicInfo {
		background: #F3F3F3;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background: linear-gradient(#D8E9FD 10%, rgba(219, 215, 251, 0.6) 30%, #FEFDFF 50%, #FAFCFC 100%);

		.avatar {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
	}

	.learningDuration {
		box-sizing: border-box;
		padding: 20rpx 30rpx;

		.learnTitle {
			font-size: 35rpx;
			color: #333333;
			font-weight: bold;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}

		.learnTxt {
			font-size: 30rpx;
			color: #333333;
			margin-top: 15rpx;

			.emphasize {
				color: #F2447A;
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}

	.otherLinks {
		background: #F3F3F3;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		background: linear-gradient(90deg, rgba(54, 131, 251, 0.6) 20%, #A7A9FC 50%, #C0D4FD 100%);
		color: #ffffff;
		box-shadow: 4px 4px 10px rgba(54, 131, 251, 0.6);

		.otherLinks_item {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
		}
	}

	.historicalAchievements {
		background: #F3F3F3;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 20rpx;

		.historicalAchievementsTitle {
			font-size: 35rpx;
			color: #333333;
			font-weight: bold;
		}

		.historicalAchievements_item {
			background: #ffffff;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			box-shadow: 4px 4px 10px #888888;

			.testPaperTitle {
				font-size: 28rpx;
				color: #000000;
				font-weight: bold;
			}

			.testTime {
				font-size: 28rpx;
				color: #737375;
				margin-top: 10rpx;
			}

			.line {
				height: 1rpx;
				background: #CCCCCC;
				width: 100%;
				margin: 30rpx 0rpx;
			}

			.historical_content {
				.historical_item {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.historical_title {
						font-size: 30rpx;
						color: #9A9EA1;
					}

					.historical_txt {
						margin-top: 10rpx;
						font-size: 30rpx;
						color: #0B0B0B;
					}

					.bule {
						color: #3888FF;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.bule {
		color: #3888FF;
		font-size: 30rpx;
	}

	.warnTxt {
		color: #E13124 !important;
		font-size: 30rpx !important;
	}

	.search-content {
		box-sizing: border-box;
		// width: 100%;
		position: relative;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 0 20rpx;

		.search-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 10rpx;
			font-size: 30rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;

			.select-border {
				width: 80%;
				height: 38px;
				line-height: 38px;
				border: 1px solid #dadbde;
				border-radius: 50rpx;
				color: #B1B1B1;
				box-sizing: border-box;
				padding: 0rpx 25rpx;
				font-size: 16px;
				// z-index: 0;

				.selectedTxt {
					color: rgb(48, 49, 51);
				}
			}

			.select-border-has {
				width: 80%;
				height: 38px;
				line-height: 38px;
				border: 1px solid #dadbde;
				border-radius: 50rpx;
				// color: #B1B1B1;
				box-sizing: border-box;
				padding: 0rpx 25rpx;
				font-size: 16px;
				// z-index: 9;
				position: relative;
				display: flex;
				align-items: center;

				.selectedTxt {
					color: rgb(48, 49, 51);
				}
			}
		}

		.search-label {
			max-width: 300rpx;
			overflow: hidden;
			// text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 30rpx;
		}

		.btn-group {
			display: flex;
			margin-top: 60rpx;
			width: 100%;
			position: relative;
			justify-content: space-between;

			.search-btn {
				width: 40%;
				border-radius: 100rpx;
				background: linear-gradient(to right, #7774ff, #017ffd, #01b1fd);
				color: #fff;
			}

			.reset-btn {
				width: 40%;
				border-radius: 100rpx;
			}
		}
	}

	.dateBorder {
		width: 80%;
		height: 38px;
		border: 1px solid #dadbde;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0rpx 25rpx;
		font-size: 16px;
		z-index: 1;
	}
	/deep/.u-radio{
		margin-right: 20rpx;
	}
</style>